@use '../tp';

.#{tp.$prefix}-fldv {
	position: relative;

	// Title button
	&_b {
		@extend %tp-folder_title;
	}
	// Title
	&_t {
		padding-left: 4px;
	}
	// Marker
	&_m {
		@extend %tp-folder_mark;
	}
	&_b:disabled &_m {
		display: none;
	}
	&#{&}-expanded > &_b > &_m {
		@extend %tp-folder_mark-expanded;
	}
	// Container
	&_c {
		@extend %tp-folder_container;
		@extend %tp-container_children;
		@extend %tp-container_subcontainers;

		padding-left: 4px;
	}
	&#{&}-expanded > &_c {
		@extend %tp-folder_container-expanded;
	}
	&#{&}-cpl:not(#{&}-expanded) > &_c {
		@extend %tp-folder_container-shrinkedCompletely;
	}
	// Indent
	&_i {
		bottom: 0;
		color: tp.cssVar('container-bg');
		left: 0;
		overflow: hidden;
		position: absolute;
		top: calc(#{tp.cssVar('container-unit-size')} + 4px);
		width: max(tp.cssVar('base-border-radius'), 4px);

		&::before {
			background-color: currentColor;
			bottom: 0;
			content: '';
			left: 0;
			position: absolute;
			top: 0;
			width: 4px;
		}
	}
	&_b:hover + &_i {
		color: tp.cssVar('container-bg-hover');
	}
	&_b:focus + &_i {
		color: tp.cssVar('container-bg-focus');
	}
	&_b:active + &_i {
		color: tp.cssVar('container-bg-active');
	}
	&.#{tp.$disabled} > &_i {
		opacity: 0.5;
	}
}
